

Vue.createApp({
    // 定义组件
    components:{
        'left-nav': LEFT_NAV,
        "my-article": ARTICLE,
        'classify-profile': CLASSIFY_PROFILE
    },
    // 初始化
    setup(){
        // reactive定义变量运行存储
        // toRefs将数据返回
        const {
            reactive, toRefs
        } = Vue
        // 定义变量，即所需数据
        const state = reactive({
            classify: {},
            articles: {},
            // 展示分类的下标
            showIndex: 0
        })

        get("/getClassify", function(data){
            state.classify = data
            // 获取文章数据
            getArticlesByClassifyId(state, state.classify[0].classifyId)
        })

        // 返回数据
        return {
            ...toRefs(state)
        }
    },
    methods:{
        // 通过接收子组件的信息设置showIndex
        setShowIndex(showIndex){
            this.showIndex = showIndex
            // 更新文章信息
            getArticlesByClassifyId(this, this.classify[this.showIndex].classifyId)

        }
    }
    // 绑定app
}).mount("#myClassify")

function getArticlesByClassifyId(that, classifyId){
    get("/getArticleList/" + classifyId, function(data){
        that.articles = data
    })
}